<template>
	<div class="root">
		<div class="left">
			<div 
				class="menu-item"
				v-for="(m,i) in menu"
				@click="menuClick(i)"
				:class="{'menu-item-high':currentSection==i}"
			>
				{{m.name}}
			</div>
		</div>
		<div class="right" ref="right">
			<div 
				class="section"
				v-for="(m,i) in menu"
			>
				<div class="section-header">{{m.name}}</div>
				<div 
					class="section-cell"
					v-for="(c,j) in m.foods"
					:ref="i+','+j"
				>
					<img :src="c.image_path|imgFil" />
					
					<div class="cItem">
						<h3>{{c.name}}</h3>
						<p>{{c.description}}</p>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		props:["menu"],
		data:function(){
			return {
				currentSection:0,
				sectionHeight:[]
			}
		},
		methods:{
			menuClick:function(ci){
				this.currentSection = ci;
				var th = 0;
				for (var i = 0;i<ci;i++) {
					th+=this.sectionHeight[i];
				}
				this.$refs.right.scrollTop = th;
			}
		},
		watch:{
			menu:function(){
				setTimeout(()=>{
					this.sectionHeight = [];
					for(var i = 0;i<this.menu.length;i++){
						var carr = this.menu[i].foods;
						var h = 0;
						for (var j = 0;j<carr.length;j++) {
							var tag = i+","+j;
							var el = this.$refs[tag][0].clientHeight;
//							console.log(el);
							h+=el;
						}
						h+=31;
						this.sectionHeight.push(h);
					}
					console.dir(this.sectionHeight);
				},100);
			}
		}
	}
</script>

<style scoped>
	.root{
		position: relative;
		display: flex;
		background-color: white;
		z-index: 10;
	}
	
	.left{
		flex-basis: 30%;
		height: calc(100vh - 50px - 144px);
		border: solid 1px black;
		overflow: scroll;
	}
	
	.right{
		flex-basis: 70%;
		height: calc(100vh - 50px - 144px);
		border: solid 1px black;
		overflow: scroll;
	}
	
	.menu-item{
		height: 5rem;
		line-height: 5rem;
		text-align: center;
		font-size: 1.2rem;
		border-bottom: solid 1px #999999;
		background-color: #EEEEEE;
	}
	
	.menu-item-high{
		background-color: white;
		border-left: solid 2px blue;
	}
	
	.section-header{
		background-color: #999999;
		padding: 10px;
		font-weight: bold;
		height: 30px;
	}
	
	.section-cell{
		display: flex;
		border-bottom: solid 1px #666666;
		
	}
	
	.section-cell img{
		width: 4rem;
		height: 4rem;
	}
	
</style>